import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'
export default class index extends Component {
    state = {
        messageArr: [
            { id: '01', title: '新闻1' },
            { id: '02', title: '新闻2' },
            { id: '03', title: '新闻3' },
        ]


    }
    handlePushShow = (id, title) => {
        //params参数跳转
        //this.props.history.push(`/home/news/detail/${id}/${title}`)

        //serach参数跳转
        this.props.history.push(`/home/news/detail/?id=${id}&title=${title}`)

        //state参数跳转
        this.props.history.push(`/home/news/detail`, { id: id, title: title })
    }
    handleReplaceShow = (id, title) => {
        //params参数跳转
        // this.props.history.replace(`/home/news/detail/${id}/${title}`)

        //serach参数跳转
        this.props.history.replace(`/home/news/detail/?id=${id}&title=${title}`)

        //state参数跳转
        this.props.history.replace(`/home/news/detail`, { id: id, title: title })
    }

    render() {
        const { messageArr } = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map((current) => {
                            return (
                                <li key={current.id}>
                                    {/* params参数 */}
                                    {/* <Link to={`/home/news/detail/${current.id}/${current.title}`}>{current.title}</Link> */}

                                    {/* search参数 */}
                                    {/* <Link to={`/home/news/detail/?id=${current.id}&title=${current.title}`}>{current.title}</Link> */}

                                    {/* state参数 */}
                                    <Link to={{ pathname: '/home/news/detail', state: { id: current.id, title: current.title } }}>{current.title}</Link>
                                    <button onClick={() => { this.handlePushShow(current.id, current.title) }}>push参看</button>
                                    <button onClick={() => { this.handleReplaceShow(current.id, current.title) }}>replace参看</button>
                                </li>
                            )
                        })
                    }
                </ul>
                {/* params参数 */}
                {/* <Route path="/home/news/detail/:id/:title" component={Detail} /> */}

                {/* search参数 */}
                {/* <Route path="/home/news/detail" component={Detail} /> */}

                {/* state参数 */}
                <Route path="/home/news/detail" component={Detail} />
            </div>

        )
    }
}
